<template>
    <div class="col-lg-6 main">
        <form class="note-form markdown" >
            <input class="title mousetrap" name="note_name" type="text" id="note_title" v-model="title">
            <Toolbar :is-publishing="isPublishing"></Toolbar>
            <textarea class="text mousetrap" name="note_content" style="height: 885px;" v-model="content"></textarea>
        </form>
    </div>
</template>

<script>
    import {writeArticle,publishArticle} from '../../vuex/actions'
    import Toolbar from './toolbar.vue'
    export default{
        components:{
            Toolbar
        },
        computed: {
            title: {
                get () {
                    return this.article.title
                },
                set (val) {
                    this.updateTitle(val)
                }
            },
            content: {
                get () {
                    return this.article.content
                },
                set (val) {
                    this.updateContent(val)
                }
            }
        },
        methods:{
            updateTitle(val){

                this.writeArticle({title:val,content:this.content})
            },
            updateContent(val){
                this.writeArticle({title:this.title,content:val})
            },
            handlePublishArticle(){
                this.publishArticle(this.article)
            }
        },
        vuex:{
            getters:{
                article: ({articleWrite}) => articleWrite.item,
                isPublishing: ({articleWrite}) => articleWrite.isPublishing
            },
            actions:{
                writeArticle,
                publishArticle
            }
        }
    }
</script>
<style>
    .main {
        border-right: 1px solid #d9d9d9;
        position: relative;
        padding: 20px 0 0 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .main .markdown {
        width: 100%;
        margin: 0;
        font-size: 16px;
        font-weight: 100;
        line-height: 25px;
    }
    .preview-mode .main .title {
        border: none;
    }
    .main .title {
        width: 100%;
        padding: 10px 20px 10px 30px;
        margin-bottom: 0;
        border-bottom: 1px solid #d9d9d9;
        font-size: 30px;
        font-weight: normal;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 0;
        box-shadow: none;
    }
    .main .markdown .text {
        width: 100%;
        height: 100%;
        padding: 30px 30px 0;
        margin-bottom: 0;
        resize: none;
        color: #2f2f2f;
        font-size: 18px;
        font-weight: 100;
        line-height: 30px;
    }
    .main .title, .main .markdown .text, .main .rich-text .text {
        height: 50px;
        padding: 0;
        border: none;
        outline: none;
        -webkit-appearance: none;
        box-sizing: border-box;
        overflow: auto;
    }

    .night-mode .main .title{
        background: none;
        color: #b1b1b1;
        border-color: #3f3f3f;
    }
</style>